<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8" />
</head>

<style>
    .container {
        margin: 5% 10%;
    }

    .box {
        padding: 10px 20px;
        margin: 15px 0;
        border-radius: 10px;
        border-left: 4px solid #539dfd;
        background-color: #ecf7fe;
    }

    .title {
        font-size: 15px;
        font-weight: 400;
        margin: 5px 0;
    }

    .time {
        color: #539dfd;
        border-bottom: 1px dashed #539dfd;
    }

    .jump {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 40px;
        border-radius: 20px;
        font-size: 14px;
        color: #fff;
        text-align: center;
        background: #539dfd;
        text-decoration: none;
    }
</style>

<body>
    <div class="container">
        <div style="text-align: center;">
            <h1 style="font-size: 20px; text-align: center;">《<span th:text="${title}" />》</h1>

            <div style="display: flex; justify-content: center; font-size: 12px;">
                <h3 class="title" style="font-size: 12px;">发送方：<span th:text="${recipient}" /></h3>
                <h3 class="title" style="margin-left: 20px; font-size: 12px;">时间：<span th:text="${time}" class="time" />
                </h3>
            </div>
        </div>

        <div class="box">
            <h3 class="title" style="line-height: 25px;"><span th:utext="${content}"></span></h3>
        </div>

        <a th:href="${url}" target="_blank" class="jump">查看完整回复内容</a>
    </div>
</body>

</html>